<template>
  <div class="view">
    <div class="container">
      <!--带筛选表格组件-->
      <table-list
        :data="tmpData"
        querySearchField=""
        :column-cfg="columnCfg"
        :queryBtnCfg="queryBtnCfg"
        :total-size="totalSize"
        :page-size="filterParams.pageSize"
        :loading="dataLoading"
        @selection-change="handleSelectionChange"
        @refresh-list="getList"
        @edit-item="handleEditItem"
        @switch-enable="switchEnable"
        @delete-item="handleDeleteItem"
      >
        <!--   序号问题处理 -->
        <template #serialNumber="{ index }">
          <div style="text-align: center">
            {{ index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}
          </div>
        </template>
        <!-- 自定义按钮区域，刷新、新增、导出等可自定义配置 -->
        <template slot="CustomBtn">
          <base-btn :btnData="btnData" @click.native="getList"></base-btn>
          <base-btn
            :btnData="btnDataAdd"
            @click.native="handleItemAdd"
          ></base-btn>
        </template>
        <!-- 自定义列 -->
        <template v-slot:nameSlot="{ row }">
          <el-input v-model="row.dataIndex" type="number"></el-input>
        </template>
      </table-list>
    </div>
    <!--  详情对话框  -->
    <item-detail ref="itemDetail" @data-change="getList"></item-detail>
  </div>
</template>

<script>
import TableList from '@/components/TableListNew/index';
import ItemDetail from './components/ItemDetail';
import AuthBtn from '@/components/AuthBtn';
import BaseBtn from '@/components/BaseBtn/index';
import { list, batchDelete } from '@/api/project/alarmHandling';
// D:\Code\Xt-visSys-Frontend\src\api\project\warningClassification.js
// userDisable, userEnable
import ListAction from '@/views/_mixins/list-action';

const searchKey = '';

export default {
  name: 'UserManage',
  mixins: [ListAction],
  components: {
    TableList,
    ItemDetail,
    AuthBtn,
    BaseBtn
  },
  props: {},
  data() {
    return {
      list: list,
      tmpData: [],
      batchDelete: batchDelete,
      idLabel: 'userId',
      deleteTip: '此操作将永久删除该用户, 是否继续?',
      filterParams: { pageSize: 10 }, //筛选条件，每次更新会保存使用的筛选条件
      btnData: {
        name: '刷新',
        type: 'refresh',
        bgColor: ''
      },
      btnDataAdd: {
        name: '新增',
        type: 'add',
        bgColor: ''
      },

      columnCfg: {
        index: {
          label: '序号',
          slotName: 'serialNumber',
          width: '60',
          align: 'left'
        },
        ':action': {
          label: '操作',
          width: 100,
          align: 'center',
          prop: ':action',
          actionArr: [
            /* {
              label: '启用',
              event: 'switch-enable',
              btnType: '',
              condition: { enable: 0 }
            },
            {
              label: '禁用',
              event: 'switch-enable',
              btnType: '',
              condition: { enable: 1 }
            }, */

            {
              label: '编辑',
              event: 'edit-item',
              btnType: ''
            },

            {
              label: '删除',
              event: 'delete-item',
              btnType: 'danger'
            }
          ]
        }
      },
      queryBtnCfg: {
        //查询
        fuzzyQuery: {
          isShow: true,
          filter: {
            keyWord: '',
            label: '',
            type: 'input',
            placeholder: `根据${searchKey}查询`
          }
        },
        //高级查询
        advancedQuery: {
          isShow: true
        }
      }
    };
  },
  computed: {},
  created() {
    this.tmpData = [
      {
        pro_qqq: '00012345'
      }
    ];

    // sessionStorage.setItem('oneday', '14');
  },
  mounted() {},
  methods: {
    //启用禁用
    switchEnable(row) {
      let tip = row.enable ? '禁用' : '启用';
      this.$confirm('即将' + tip + '此账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn',
        confirmButtonClass: 'confirm-msgbtn',
        type: 'warning'
      })
        .then(() => {
          /* if (row.enable) {
            userDisable(row.userId).then(res => {
              this.$message.success(tip + '成功');
              this.getList();
            });
          } else {
            userEnable(row.userId).then(res => {
              this.$message.success(tip + '成功');
              this.getList();
            });
          } */
        })
        .catch(() => {});
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 16px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
